<template>
    <view class="main">
        <view>
            <view class="title" style="display: flex;justify-content: space-between;align-items: center;">
                <view class="title">
                    <text>*</text>
                    <view>反馈类型</view>
                </view>
                <view class="icon" @click="goToHistory">
                    <image src="/static/icon/feedback.png" mode="scaleToFill" />
                </view>
            </view>
            <view class="feedback-type">
                <view class="feedback-type-item" @click="clickFeedbackType(item, index)"
                    :class="current == index ? 'actives' : ''" v-for="(item, index) in feedbackType" :key="index">
                    <text>{{ item.title }}</text>
                </view>
            </view>
        </view>
        <view class="desc">
            <view class="title">
                <text>*</text>
                <view>反馈描述</view>
            </view>
            <view class="feedback-des">
                <wd-textarea v-model="form.feedbackNotes" placeholder="请至少用10个字描述，这有助于问题/建议快速跟进解决。" />
                <view class="desc-count">
                    <text>{{ currentLen }}/{{ maxLen }}</text>
                </view>
            </view>
        </view>
        <button class="login-btn" :class="{ active: canSubmit }" :disabled="!canSubmit" @click="handleFeedback">
            提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交
        </button>
    </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { feedback } from '@/api/apiList'
import { throttle } from '@/utils/tools'

defineOptions({
    options: {
        styleIsolation: 'shared'
    }
})

let maxLen = ref(500)
let currentLen = ref(0)

let current = ref(0)
const clickFeedbackType = (item, index) => {
    current.value = index
    form.value.feedbackType = item.value
}

const form = ref({
    feedbackType: '1',
    feedbackNotes: ''
})

watch(() => form.value.feedbackNotes, (newVal) => {
    currentLen.value = newVal.length
})

const feedbackType = ref([
    {
        title: '设备故障',
        value: '0'
    },
    {
        title: '意见建议',
        value: '1'
    },
    {
        title: '其他',
        value: '2'
    }
]);

const handleFeedback = throttle(async () => {
    if (form.value.feedbackNotes.length < 10 || form.value.feedbackNotes.length > maxLen.value) {
        uni.showToast({
            title: '请输入10-500个字',
            icon: 'none'
        })
        return
    }
    const res = await feedback(form.value)
    if (res.code == 200) {
        uni.showToast({
            icon: 'none',
            title: '感谢反馈，我们将尽快答复您'
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 500)
    } else {
        uni.showToast({
            title: res.data.msg || '反馈失败',
            icon: 'none'
        })
    }
}, 1000)

// 计算属性：是否可以提交
const canSubmit = computed(() => {
    return (
        form.value.feedbackType &&
        form.value.feedbackNotes.length
    )
})

const goToHistory = () => {
    uni.navigateTo({
        url: '/pages/mine/feedbackHistory'
    })
}
</script>

<style lang="scss" scoped>
.actives {
    background-color: #55946d !important;
    color: #fff !important;
    transition: all .4s;
}

.login-btn {
    margin-top: 100rpx;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #cccccc;
    color: white;
    border-radius: 12rpx;
    font-size: 32rpx;
    border: none;

    &.active {
        background-color: #55946d;
    }

    &[disabled] {
        background-color: #cccccc;
    }
}

.main {
    padding: 20rpx;

    .desc {
        margin-top: 50rpx;

        .feedback-des {
            border: 1rpx solid #ababab;
            border-radius: 20rpx;
            position: relative;

            .desc-count {
                position: absolute;
                right: 10rpx;
                bottom: 10rpx;
                color: #e2e0e0;
            }
        }
    }

    .title {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;

        text {
            color: red;
        }
    }

    .feedback-type {
        padding: 0 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .feedback-type-item {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #e2e0e0;
            border-radius: 30rpx;
            font-size: 25rpx;
            width: 25%;
            padding: 15rpx 0;
        }
    }
}

.icon {
    width: 40rpx;
    height: 40rpx;

    image {
        width: 100%;
        height: 100%;
    }
}

:deep(.wd-textarea) {
    border-radius: 20rpx !important;

}
</style>